import Image from "next/image";
import { ArticleInfo } from "@/type";
import GotoDedail from "@/components/GotoDedail";

interface Props {
  diaryList: ArticleInfo[];
}

export default async function DiaryList({ diaryList }: Props) {
  return (
    <div className="w-[calc(100% - 8px)] mx-2 md:mx-0">
      {diaryList.map((item, i) => (
        <div
          key={i}
          className="relative mb-7 p-2 rounded-lg bg-primary-card shadow-xl slide-in-blurred-left"
          style={{
            animationDelay: `${i * 200}ms`,
            animationFillMode: "both",
          }}
        >
          <div className="text-lg md:text-xl font-medium">
            <span className="md:max-w-[500px] mr-8">{item.title}</span>
            <span className="float-right text-base">
              {!!item.top_up && <span className="mr-1">🔝</span>}
              {!!item.popular && <span>🔥</span>}
            </span>
          </div>
          <div className="md:min-h-[200px]">
            <div
              className="mb-[10px] text-stone-400 indent-4 md:indent-10 hyphens-auto"
              lang="de"
            >
              {item.synopsis}
            </div>
            <div className="mb-2 md:mb-4">
              <div className="relative overflow-hidden w-[230px] md:w-[300px] lg:w-[55%] xl:w-[50%] h-[140px] md:h-[160px] lg:h-[180px] xl:h-[200px] rounded-[5px] mx-1 md:mx-2">
                {item.cover_img_url && (
                  <Image
                    src={item.cover_img_url}
                    alt="ReindeerのRoom article image"
                    fill
                    loading="lazy"
                    quality={100}
                    sizes="100%"
                    style={{
                      objectFit: "cover",
                      objectPosition: "center",
                    }}
                  />
                )}
              </div>
            </div>
          </div>

          <footer className="cursor-default flex justify-between text-sm md:text-base">
            <span>🕐1个纪元以前</span>
            <span>👀 {item.page_view}</span>
            <span>👍 {item.thumbs_up}</span>
            <span>💬 {item.comment_num}</span>
            <span>🔗</span>
          </footer>
          <GotoDedail articleId={item.article_id} />
        </div>
      ))}
    </div>
  );
}
